<template>
    <div class="my-collection-list">
      <div class="card-header">
        <div class="header-icon">
          <span class="star-icon">⭐</span>
        </div>
          <h2 class="header-title">我的收藏</h2>
        </div>
        <div class="collection-item" v-for="item in collectionItems" :key="item.id">
          <div class="item-name">{{ item.name }}</div>
          <div class="item-date">{{ item.date }}</div>
          <div class="item-count">共{{ item.dialogCount }}条对话</div>
      </div>
    </div>
  </template>

  <script>
  export default {
    name: 'CollectionCard',
    data() {
      return {
        // 假设的数据，实际应用中可能需要从API获取
        collectionItems: [
          { id: 1, name: '英语学习方法', date: '2024.8.27', dialogCount: 110 },
          { id: 1, name: '英语学习方法', date: '2024.8.27', dialogCount: 110 },
          { id: 1, name: '英语学习方法', date: '2024.8.27', dialogCount: 110 }
          // { id: 1, name: '英语学习方法', date: '2024.8.27', dialogCount: 110 },
          // { id: 2, name: '另一个收藏项', date: '2024.8.28', dialogCount: 80 } // 添加额外的数据项作为示例
        ]
      }
    }
  }
  </script>

  <style scoped>
  .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
}
.header-icon {
  font-size: 24px;
  color:rgb(255,193,7);
}

.card-header .header-title {
  font-size: 20px;
  font-weight: bold;
  color:rgb(255,193,7);
  /* margin-left: -10px; */
}
  .my-collection-list {
    /* display: flex;   */
    flex-direction: column;
    /* gap: 10px; 项目之间的间隔   */
    background-color:rgb(255,252,242);
    padding-bottom: 20px;
  }

  .collection-item {
    /* display: flex; */

    align-items: center;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 70%; /* Adjust width as needed */
    margin: auto;
    margin-top:10px;

  }

  .item-name {
    /* 根据需要调整样式 */
    font-size: 16px; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
  }
  .item-data{
    font-size: 14px; /* 字体大小 */
    color: #666; /* 字体颜色，通常为灰色以表示辅助信息 */
  }
  .item-count{
    font-size: 14px; /* 字体大小 */
  color: #007bff; /* 字体颜色，这里用蓝色表示数量，强调信息 */
  }
  </style>
